<#import "/util.ftl" as fileserve />
<html>
<head>
    <title>文件列表</title>
    <style type="text/css">
        .hide-opacity {
            opacity: 0;
        }

        .show-opacity {
            color: #FFFFFF;
            text-align: center;
            -webkit-transition: opacity 3s ease-in-out;
            -moz-transition: opacity 3s ease-in-out;
            -ms-transition: opacity 3s ease-in-out;
            -o-transition: opacity 3s ease-in-out;
            opacity: 1;
        }
    </style>
    <script type="text/javascript">
        (function(){
            // mock jquery
            var $ = document.querySelector.bind(document);

            var show = function(el){
                console.log(el);
                el.classList.add("show-opacity");
                el.style.display = "block";
            };

            var hide = function(el){
                el.addEventListener("webkitAnimationEnd", function(){
                    this.style.display = "none";
                });
                el.classList.remove("show-opacity");
                el.classList.add("hide-opacity");
            };

            HTMLElement.prototype.on = function(){
                HTMLElement.prototype.addEventListener.apply(this, arguments);
            };

            $.upload = function(url, form, progress_call) {

                var xhr = new XMLHttpRequest();

                xhr.open("POST", url, true);

                xhr.upload.addEventListener('progress', function(event){
                    progress_call(event, 0, 0);
                });

                xhr.upload.addEventListener('loadstart', function(event){
                    progress_call(event, 1, 0);
                });

                xhr.upload.addEventListener('loadend', function(event){
                    progress_call(event, 0, 1);
                });

                var promise = new Promise(function(resolve, reject){
                    xhr.addEventListener("load", function(event){
                        if ( event.target.status >= 200 && event.target.status < 400 ) {
                            resolve(event.target);
                        } else {
                            reject(event.target);
                        }
                    });
                    xhr.addEventListener("error", function(event){
                        reject(event.target);
                    });
                });

                xhr.send(form);

                return promise;
            };

            document.addEventListener("DOMContentLoaded", function () {

                var upfilefrom = $("form[name=upfilefrom]");

                upfilefrom.on("submit", function(event){

                    event.preventDefault();

                    var upfile = $("input[name=file]");

                    if ( upfile.files.length < 1 ) {

                        return alert("你要上传点什么?");

                    }

                    // byte to mb / 1024 / 1024

                    // limit size 2mb

                    var limitSizeOfMB = 20;

                    if ( (upfile.files[0].size / 1024 / 1024) > limitSizeOfMB ) {

                        return alert("你的文件太大了, 请选择小于"+limitSizeOfMB+"MB的文件");

                    }

                    var upload_progress = $("#upload_progress");

                    $.upload(this.action, new FormData(this), function upload_progress_call(e, isStartLoad, isLoaded){

                        if ( e.total > 0 ) {
                            upload_progress.value = Math.round( (e.loaded / e.total) * 100);
                        }

                        if ( isStartLoad ) {
                            show(upload_progress);
                        }

                        if ( isLoaded ) {
                            hide(upload_progress);
                        }

                    }.bind(this)).then(function success(e){

                        upfilefrom.reset();

                        alert("上传完成");

                    }, function fail(xhr){

                        console.log(xhr);

                        var err = JSON.parse(xhr.responseText);

                        alert("上传失败:" + xhr.statusText + ", " + err.errMsg);

                    });

                });
            });
        })();
    </script>
</head>
<body>
    <progress value="22" max="100" id="upload_progress" style="display: none;">
    </progress>
    <form name="upfilefrom" method="post" action="${contextPath}/upfile" enctype="multipart/form-data">
        <input hidden="hidden" name="uptoken" value="${uptoken}">
        <input type="file" name="file">
        <button type="submit">上传</button>
    </form>
    <br>
    <hr>
    <a href="${contextPath}/file_list">文件列表</a>
</body>
</html>